<template>
  <div class="profile-container">
    <div class="info" v-if="userState">
      <div class="base-info">
        <van-cell
        :border="false"
        center
        >
          <template #icon>
             <van-image
              cover
              round
              :src="userData.photo"
            />
          </template>
          <template #title>
            <span>{{userData.name}}</span>
          </template>
          <template #default>
            <van-button size='mini' round to='/editdata' @click="goEdit">编辑资料</van-button>
          </template>
        </van-cell>
      </div>
      <div class="data-info">
        <van-grid :border="false">
         <van-grid-item>
           <template #text>
             <div class="data-number">{{userData.art_count}}</div>
             <div class="data-text">头条</div>
           </template>
         </van-grid-item>
          <van-grid-item>
            <template #text>
             <div class="data-number">{{userData.follow_count}}</div>
             <div class="data-text">关注</div>
           </template>
          </van-grid-item>
          <van-grid-item>
            <template #text>
             <div class="data-number">{{userData.fans_count}}</div>
             <div class="data-text">粉丝</div>
           </template>
          </van-grid-item>
          <van-grid-item>
            <template #text>
             <div class="data-number">{{Math.abs(userData.like_count)}}</div>
             <div class="data-text">获赞</div>
           </template>
          </van-grid-item>
        </van-grid>
      </div>
      </div>
    <div class="not-login" v-else>
      <img src="~assets/images/profile/not-login.png" alt="path error" class="mobile">
      <div class="text"><span @click="goLogin">登录</span>&nbsp;/&nbsp;<span>注册</span></div>
    </div>
      <div class="collect-history">
        <van-grid :column-num="2" :border="false">
          <van-grid-item
            icon-prefix='toutiao'
            icon='shoucang'
            text='收藏'
          >
          </van-grid-item>
          <van-grid-item
            icon-prefix='toutiao'
            icon='lishi'
            text='历史'
          >
          </van-grid-item>
        </van-grid>
      </div>
      <div class="gray-bottom"></div>
      <div class="message-classmates">
        <van-cell title="消息通知" is-link to="/home" />
        <van-cell title="小智同学" is-link to="/home" />
      </div>
        <div class="gray-bottom"></div>
      <div class="exit-login" v-show="userState"  @click="onLogout">
         <van-cell title="退出登录"/>
      </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getUserData } from 'network/user'
export default {
  name: 'Profile',
  data () {
    return {
      userData: {}
    }
  },
  created () {
    // 获取用户资料
    this.userState && this.onLoadUserData()
  },
  methods: {
    ...mapMutations(['setUserState']),
    // 获取用户资料
    async onLoadUserData () {
      try {
        // const { data: res } = await getUserData()
        const { data: res } = await getUserData()
        this.userData = res.data
        console.log(this.userData)
      } catch (error) {
        console.dir(error)
      }
    },
    // 退出登录操作
    onLogout () {
      this.$dialog.confirm({
        title: '确认退出',
        message: '确定要退出吗?'
      })
        .then(() => {
          this.setUserState(null)
          this.$toast.loading({
            message: '正在退出登录',
            forbidClick: true,
            duration: 0
          })
          this.$toast.success('退出成功')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 跳转登录页
    goLogin () {
      this.$router.push('/login')
    },
    // 跳转编辑资料页,把用户id传过去
    goEdit () {
      if (!this.userState) {
        return this.$toast('老总还没登录哦(⊙o⊙)…')
      }
      this.$bus.$emit('go-edit', this.userData.id)
      console.log('a')
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style lang='less' scoped>
  .profile-container{
    .info{
      height: 200px;
      box-sizing: border-box;
      background: url('~assets/images/profile/background.png') no-repeat;
      .van-cell{
      background: unset;
      height: 135px;
     padding: 57px 16px 11px 16px;
 /deep/ .van-grid-item__content {
      background: unset;
      }
        .van-cell__title{
        font-size: 15px;
        color: #fff;
      }
        .van-button{
          color: #666666;
      }
         .van-image{
        height: 66px;
        width: 66px;
        box-sizing: border-box;
        border: 1px solid #fff;
        margin-right: 13px;
      }
      }
      .van-grid{
        height: 65px;
        box-sizing: border-box;
       /deep/ .van-grid-item__content{
          background: unset;
        }
        .data-number{
          font-size: 18px;
          color: #fff;
        }
        .data-text{
          font-size: 12px;
          color: #fff;
        }
      }
    }
    .collect-history{
      .van-grid{
        height: 70px;
        border-bottom:4px solid #eee ;
    /deep/ .van-grid-item:nth-child(1) .toutiao{
       font-size: 23px;
       color: #eb5253;
      }
    /deep/ .van-grid-item:nth-child(2) .toutiao{
       font-size: 23px;
       color: #ff9d1d;
      }
    /deep/  .van-grid-item__text{
        color: #333333;
      }
      }
    }
   .gray-bottom{
      height: 4px;
      background-color:#eee;
      position: relative;
    }
    .message-classmates{
    /deep/  .van-cell{
        font-size: 15px;
        color: #333333;
      }
    }
    .exit-login{
      .van-cell__title{
        text-align: center;
        color: #d86262;
        font-size: 15px;
      }
    }
    .not-login{
       height: 200px;
      box-sizing: border-box;
      background: url('~assets/images/profile/background.png') no-repeat;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .mobile{
        width: 66px;
        height: 66px;
        border-radius: 50%;
        margin-bottom: 8px;
      }
      .text{
        font-size: 14px;
        color: #fff;
      }
    }
  }
</style>
